<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js

class Weather extends React.Component{
    // 初始化状态
    state={
        isHot:true,
        wind:'微风'
    }

    // 自定义方法：使用赋值语句+箭头函数（解决this指向问题）
    changeWeather= ()=>{
        // console.log(this)箭头函数this找外层---Weather的实例对象
        const isHot=this.state.isHot
        this.setState({isHot: !isHot})
    }

    render(){
        const {isHot,wind}=this.state
        return  <h2 onClick={this.changeWeather}>今天天气很{isHot===true?'炎热':'凉爽'},{wind}</h2>
    }
}
ReactDOM.render(<Weather/>,document.getElementById('container'))

</script>